<template>
  <div class="wrap">
      <div class="title">奖品</div>
      <ul class="list">
          <li v-if="hasFirstPrize">
              <responsive-image v-if="firstPrizeImg" class="prize-img" :src="firstPrizeImg" size="@90w_90h_1c" />
              <div v-else class="img-wrap"></div>
              <div class="level">一等奖</div>
              <div class="desc">{{firstPrizeDesc}}</div>
          </li>
          <li v-if="hasSecondPrize">                        
              <responsive-image v-if="secondPrizeImg" class="prize-img" :src="secondPrizeImg" size="@90w_90h_1c" />
              <div v-else class="img-wrap"></div>
              <div class="level">二等奖</div>
              <div class="desc">{{secondPrizeDesc}}</div>
          </li>
          
          <li v-if="hasThirdPrize">                        
              <responsive-image v-if="thirdPrizeImg" class="prize-img" :src="thirdPrizeImg" size="@90w_90h_1c" />
              <div v-else class="img-wrap"></div>
              <div class="level">三等奖</div>
              <div class="desc">{{thirdPrizeDesc}}</div>
          </li>
      </ul>
    </div>
</template>

<script>
import ResponsiveImage from '@/components/responsive-image'
export default {
    name: 'LotteryPrize',
    components: {
      ResponsiveImage
    },
    props: {
      prizes: {
        type: Object
      }
    },
    computed: {
      hasPrizes() {
        return !!this.prizes
      },
      hasFirstPrize() {
          return this.hasPrizes ? this.prizes.first_prize > 0 : false
      },
      firstPrizeDesc() {
          return this.hasPrizes ? this.prizes.first_prize_cmt : ''
      },
      firstPrizeImg() {
          return this.hasPrizes ? this.prizes.first_prize_pic : ''
      },
      hasSecondPrize() {
          return this.hasPrizes ? this.prizes.second_prize > 0 : false
      },
      secondPrizeImg() {
          return this.hasPrizes ? this.prizes.second_prize_pic : ''
      },
      secondPrizeDesc() {
          return this.hasPrizes ? this.prizes.second_prize_cmt : ''
      },
      hasThirdPrize() {
          return this.hasPrizes ? this.prizes.third_prize > 0 : false
      },
      thirdPrizeImg() {
          return this.hasPrizes ? this.prizes.third_prize_pic : ''
      },
      thirdPrizeDesc() {
          return this.hasPrizes ? this.prizes.third_prize_cmt : ''
      }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    padding: 10px;
    @include border1px(#e7e7e7, 1px 0);
    .list {
        display: flex;
        justify-content: space-around;
        margin-top: 5px;
        list-style: none;
        li {
            width: 90px;
            text-align: center;
        }
        .prize-img {
            padding-bottom: 100%;
        }
        .img-wrap {
            width: 90px;
            height: 90px;
            @include border1px(#e7e7e7, 1px, 4px);
            background: url('~@/assets/lottery-pink.png') 50% no-repeat;
            background-size: cover;            
        }
        .level {
            margin: 8px 0 4px;
            font-size: 12px;
        }
        .desc {
            color: #757575;
            font-size: 12px;
            word-wrap: break-word;
        }
    }
}
.title{
    padding: 2px 0 10px;
    font-size: 15px;
    text-align: center;
}
</style>